import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:kongqi/global.dart';
import 'package:flutter/material.dart';
import 'package:kongqi/http/api.dart';
import 'package:kongqi/iconfont.dart';
import 'package:kongqi/page/detail.dart';

class IndexPage extends StatefulWidget {
  IndexPage({Key key}) : super(key: key);
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  TextEditingController _searchController = new TextEditingController();
  @override
  void initState() {
    super.initState();
  }

  List<Widget> renderResou() {
    List<Widget> list = [];
    List items = [
      {'city': '太原', 'id': 'taiyuan'},
      {'city': '北京', 'id': 'beijing'},
      {'city': '上海', 'id': 'shanghai'},
      {'city': '天津', 'id': 'tianjin'},
      {'city': '广州', 'id': 'guangzhou'},
      {'city': '长沙', 'id': 'changsha'},
      {'city': '深圳', 'id': 'shenzhen'},
      {'city': '武汉', 'id': 'wuhan'},
      {'city': '杭州', 'id': 'hangzhou'},
      {'city': '郑州', 'id': 'zhengzhou'},
      {'city': '福州', 'id': 'fuzhou'},
      {'city': '成都', 'id': 'chengdu'},
    ];
    for (var i = 0; i < items.length; i++) {
      list.add(InkWell(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailPage(
                id: items[i]['id'],
              ),
            ),
          );
        },
        child: Container(
          padding: EdgeInsets.fromLTRB(10, 3, 10, 3),
          decoration: BoxDecoration(
            color: Global.backgroundColor,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text(
            items[i]['city'],
            style: TextStyle(
              color: Global.primaryColor,
              fontSize: 12,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ));
    }
    return list;
  }

  search(city) {
    if (city != null && city.trim() != '') {
      EasyLoading.show(status: '搜索中...');
      getCitySearch(city).then((res) {
        EasyLoading.dismiss();
        if (res == null || res['result'].length == 0) {
          EasyLoading.showToast('匹配失败，试试查询其他城市吧');
        } else {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailPage(
                id: res['result'][0]['id'],
              ),
            ),
          );
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Global.primaryColor,
            Global.primaryColor.withOpacity(0),
          ],
        ),
      ),
      child: Column(
        children: [
          SizedBox(height: 60),
          Container(
            width: 140,
            child: Image.asset('assets/images/icon.png'),
          ),
          SizedBox(height: 30),
          Container(
            width: MediaQuery.of(context).size.width - 70,
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              border: Border.all(
                width: 1.5,
                color: Global.backgroundColor,
              ),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _searchController,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration.collapsed(
                      hintText: "输入城市名查询空气质量",
                      hintStyle: TextStyle(
                        color: Global.backgroundColor,
                        fontSize: 13,
                      ),
                    ),
                    style: TextStyle(
                      fontSize: 13,
                      color: Global.backgroundColor,
                    ),
                    cursorColor: Global.backgroundColor,
                    onSubmitted: (text) {
                      search(text);
                    },
                  ),
                ),
                InkWell(
                  onTap: () {
                    search(_searchController.text.toString());
                  },
                  child: Container(
                    width: 40,
                    child: Icon(
                      Icons.search,
                      color: Global.backgroundColor,
                      size: 20,
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 30),
          Text(
            '热门搜索',
            style: TextStyle(
              color: Global.backgroundColor,
              fontSize: 16,
              fontWeight: FontWeight.w400,
            ),
          ),
          SizedBox(height: 16),
          Container(
            padding: EdgeInsets.fromLTRB(20, 10, 20, 20),
            child: Wrap(
              spacing: 10,
              runSpacing: 20,
              children: renderResou(),
            ),
          )
        ],
      ),
    );
  }
}
